* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}

.grid-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: auto 1fr;
  background-color: rgb(200, 200, 200);
  /* grid-gap: 1px; */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wbx-cell {
  position: relative;
  background-color: #fff;
  /* height: 20px; */
}

.grid-wrapper .grid-first-block {
  background-color: rgb(230, 230, 230);
  border-bottom: 1px solid rgb(200, 200, 200);

}

.grid-first-block:hover {
  cursor: cell;
}



.grid-wrapper .grid-row-header,
.grid-wrapper .grid-column-header {
  display: grid;
  text-align: center;
  /* grid-gap: 1px; */
  background-color: rgb(230, 230, 230);
}
.grid-column-header-cell {
  background-color: rgb(230, 230, 230);
  border-bottom: 1px solid rgb(200, 200, 200);
}
.grid-column-header-cell:hover,
.grid-row-header-cell:hover,
.grid-column-header-cell.column-active:hover,
.grid-row-header-cell.row-active:hover {
  background-color: rgb(159, 213, 183);
  /* color: rgb(34, 116, 71); */
}

.grid-column-header-cell.column-active,
.grid-row-header-cell.row-active {
  background-color: rgb(211, 240, 224);
  color: rgb(34, 116, 71);
}

.grid-column-header-cell.column-active {
  border-bottom: 1px solid rgb(34, 116, 71);
}
.grid-row-header-cell.row-active {
  /* border-right: 1px solid rgb(34, 116, 71); */
  box-shadow: 1px 0px 0 0 rgb(34, 116, 71);
  z-index: 2;
}


.grid-row-header-cell {
  background-color: rgb(230, 230, 230);
}

.grid-column-header-cell:last-child .column-resize-bar {
  right: 0;
}

/* 
.grid-row-header-cell-first {
  border-left: 1px solid #ccc;
}
 */

.grid-column-header-cell-first {
  border-left: 1px solid rgb(200, 200, 200);
}

/* .grid-wrapper .grid-row-header {
  display: grid;
  text-align: center;
  background-color: rgb(230, 230, 230);
} */

.grid-wrapper .grid-body {
  display: grid;
  /* grid-gap: 1px; */
  cursor: cell;
}




.wrapper > div {
  background-color: navajowhite;
}

.wrapper > div:nth-child(2n) {
  /* background-color: hotpink; */
}

.first-row {
  background-color: rgb(230, 230, 230);
  text-align: center;
}
.first-column {
  background-color: rgb(230, 230, 230);
  text-align: center;
}

.header {

}
.column-resize-bar {
  position: absolute;
  display: block;
  right: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  /* background-color: #000; */
  background-color: rgb(200, 200, 200);
  z-index: 1;
}
.column-resize-bar span {
  position: absolute;
  display: block;
  height: 100%;
  left: -2px;
  width: 5px;
}

.column-resize-bar:hover {
  cursor: col-resize;
}

.row-resize-bar {
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  /* background-color: #000; */
  background-color: rgb(200, 200, 200);
  z-index: 1;
}
.row-resize-bar span {
  position: absolute;
  display: block;
  bottom: -2px;
  height: 5px;
  width: 100%;
}

.row-resize-bar:hover {
  cursor: row-resize;
}

.grid-body .wbx-cell {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.grid-body .wbx-cell.multi-active {
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
}

/* 单选 */
.grid-body .wbx-cell.active:not(.multi-active) {
  border-bottom: 1px solid rgb(34, 116, 71);
  border-left: 1px solid rgb(34, 116, 71);
  box-shadow: 1px -1px 0 0 rgb(34, 116, 71),
  0px -1px 0 0 rgb(34, 116, 71);
  z-index: 1;
}

/* 列选 */
.grid-body .wbx-cell.column-active {
  border-left: 1px solid rgb(34, 116, 71);
  border-bottom: none;
  /* border-right: 1px solid rgb(34, 116, 71); */
  box-shadow: 1px 0px 0px 0px rgb(34, 116, 71),
    inset 0px -1px 1px 0px rgb(150, 150, 150);
  z-index: 1;
  background-color: rgb(198, 198, 198);
}

.grid-body .wbx-cell.row-active {
  /* border-left: 1px solid transparent; */
  /* border-bottom: 1px solid rgb(34, 116, 71); */
  /* border-right: 1px solid rgb(34, 116, 71); */
  border-bottom: none;
  box-shadow: 0 -1px 0px 0px rgb(34, 116, 71),
    0 -1px 0px 0px rgb(34, 116, 71),
    inset 0px -1px 1px 0px rgb(34, 116, 71);
  z-index: 1;
  background-color: rgb(198, 198, 198);
}


/* 行选 */

.wbx-cell-last-row {
  /* border-bottom: 1px solid #ccc; */
}

/* 多选 */

/* 既是单选 又是多选的第一个 */
.grid-body .wbx-cell.active.multi-active {
  background-color: #fff;
}

.grid-body .wbx-cell.multi-active {
  background-color: rgb(198, 198, 198);
  z-index: 2;
}
.grid-body .wbx-cell.multi-active-top {
  /* border-top: 1px solid orange; */
  box-shadow: 1px -1px 0 0 rgb(34, 116, 71), 0px -1px 0 0px rgb(34, 116, 71);
}
.grid-body .wbx-cell.multi-active-top.multi-active-right {
  box-shadow: 1px 0 0 0 rgb(34, 116, 71),
  1px -1px 0 0 rgb(34, 116, 71),
  0px -1px 0 0px rgb(34, 116, 71);
}
.grid-body .wbx-cell.multi-active-left {
  border-left: 1px solid rgb(34, 116, 71);
}
.grid-body .wbx-cell.multi-active-right {
  /* border-right: 1px solid orange; */
  box-shadow: 1px 0 0 0 rgb(34, 116, 71);
}
.grid-body .wbx-cell.multi-active-bottom {
  border-bottom: 1px solid rgb(34, 116, 71);
}


/* 菜单 */
.grid-menu {
  position: absolute;
  width: 100px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 1px 1px #ccc;
  z-index: 3;
  display: none;
}

.grid-menu ul {
  margin: 2px;
  font-size: 0.8em;
  /* color: rgb(200, 200, 200); */
  color: #666;
}
.grid-menu ul li {
  padding: 4px 0;
}
.grid-menu ul li:hover {
  background-color: rgb(235, 235, 235);
  color: #000;
}
.wbx-first-block-triangle {
  position: relative;
  /* width: auto; */
  height: 20px;
}
.wbx-first-block-triangle i {
  display: block;
  position: absolute;
  right: 1px;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 14px solid #bbb;
  border-left: 14px solid transparent;
}